<template>
	<view>

		<view class="content" :style="{height:this.aaaa+'px'}">
			<view style="text-align: center; font-size: 70rpx;padding-top: 350rpx;"><text>Welcome</text></view>
			<view class="text-area">
				<view>
					<view class="flex size">账号：<input type="text" v-model="usernametxt" /></view>
					<view class="flex size"> 密码：<input password="true" type="digit" v-model="passwordtxt" /></view>

					<view class="flex">
						<button class="border-radius size" @click="Event_Login()">登 录</button></view>
				</view>
			</view>
			
			<button  style="margin-top: 20rpx;color: #ffffff; border: 0;" plain="true" open-type="getUserInfo"
			 @click="weixin()">微信登录</button>
			 <!-- 登录协议 -->
			 <view style="position: fixed;bottom: 10%; left: 15%; color: white;">
				<text>登录即视为你同意<text style="color: #e80d11; text-decoration:underline;"> 微聊协议 </text>及<text style="color: #e80d11; text-decoration:underline; "> 个人开发协议 </text></text>
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usernametxt: '',
				passwordtxt: '',
				aaaa: ''
			};
		},
		onBackPress(e) {
			// return true 表示禁止默认返回
			return true
		},
		// 加载判断是否token
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.aaaa = res.windowHeight
				}
			})
		},
		methods: {
			weixin() {
				//#ifdef MP-WEIXIN
				console.log("微信进入")
				uni.getUserInfo({
					success: (res) => {
						console.log(res.rawData);
						let username = JSON.parse(res.rawData)
						console.log(username)
						uni.setStorage({
							key: 'username.avatarUrl',
							data: username.avatarUrl,
							success: function() {
								console.log('success');
							}
						});
						uni.setStorage({
							key: 'username.nickName',
							data: username.nickName,
							success: function() {
								console.log('success');
							}
						});
						this.pic = username.avatarUrl
						this.name = username.nickName
						this.ifs = false
					},
					fail: () => {
						console.log("未授权");
					}
				})
				// #endif
				//#ifdef APP-PLUS
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// console.log(loginRes.authResult + 'session');
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								// 保存用户基本信息（异步）
								uni.setStorage({
									key: "userInfo",
									data: infoRes.userInfo,
									success() {
										console.log("缓存成功");
										uni.setStorage({
											key: 'login_status',
											data: 'ok',
											success: function() {
												uni.switchTab({
													url: "../index/index"
												});
											},
											fail() {
												uni.showToast({
													title: '储存用户信息失败',
													duration: 2000,
													icon: 'none'
												});
											}
										});
									}
								})
								console.log(infoRes.userInfo);
							}
						});
					}
				})
				// #endif
			},
			Event_Login() {
				console.log('登录', this.usernametxt, this.passwordtxt)
				uni.request({
					url: 'http://619757.top/applogin.php',
					data: {
						username: this.usernametxt,
						userpass: this.passwordtxt
					},
					method: "GET",
					success: res => {
						console.log(res)
						if (res.data.status == "登录失败") {
							console.log(res)
							uni.showToast({
								title: '请确认您的密码是否正确',
								duration: 2000,
								icon: 'none'
							});
						} else {
							let arrrys=res.data.user[0]
							console.log(arrrys)
							// 保存用户基本信息（异步）
							uni.setStorage({
								key: "userInfo",
								data: arrrys,
								success() {
									// console.log("缓存成功");
									uni.setStorage({
										key: 'login_status',
										data: 'ok',
										success: function() {
											uni.switchTab({
												url: "../index/index"
											});
										},
										fail() {
											uni.showToast({
												title: '储存用户信息失败',
												duration: 2000,
												icon: 'none'
											});
										}
									});
								}
							})
						}
					},
					fail() {
						uni.showToast({
							title: '抱歉发生意外',
							duration: 2000
						});
					}
				});
			},

		},

	}
</script>

<style lang="less" scoped>
	.border-radius {
		border-radius: 40rpx;
		opacity: .8;
	}

	.size {
		font-size: 38rpx;
	}

	.content {
		background-image: url(../../static/lodin.jpeg);
		background-size: 100% 100%;

		// padding-top: 80px;
		.logo_div {
			width: 100%;
			padding-top: 80px;
			// background-color: red;
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.login {
				width: 200rpx;
				height: 180rpx;

			}
		}

		.text-area {
			width: 80%;
			margin: 0 auto;
			font-size: 40rpx;

			.flex {
				margin-top: 80rpx;
				display: flex;
				width: 100%;
				justify-content: space-around;
				align-items: center;
			}

			input {
				height: 80rpx;
				width: 80%;
				font-size: 40rpx;
				border-bottom: 1px solid blue;
			}

			button {
				width: 100%;
			}
		}

	}
</style>
